<!-- demo1.html -->
<!DOCTYPE html>
<html lang="zh-CN">

<head>

    <meta charset="utf-8">
    <title>实时猫 Demo</title>

    <!-- jQuery -->
    <script src="//cdn.realtimecat.com/realtimecat/jquery.min.js"></script>

    <!-- 实时猫 RealTimeCat JavaScript SDK -->
    <script src="//cdn.realtimecat.com/realtimecat/realtimecat-0.2.min.js"></script>

</head>

<body>

    <div id="media-list"></div>
     <!-- 定义一个视频容器，命名为"localMediaContainer" -->
    <div id="localMediaContainer"></div>

    <script>
        (function ($) {
        	
        	
    /*    	   // 创建本地视频流
            var config = {audio: true, video: true};
            // 定义本地视频流对象
            var localStream = new RTCat.Stream(config);
            // 监听已获得视频内容"access-accepted"事件
            localStream.on("access-accepted", function () {
                // 播放本地视频流到"localMediaContainer"
                localStream.play("localMediaContainer");
            });
            
            // 初始化视频流
            localStream.init(); */

        	/*************创建本地流结束*****************/

            // 声明变量
            var session;
            var localStream; //本地流
            var mediaList = document.querySelector('#media-list');

            /********************************
             *           工具函数
             ********************************/
            // 初始化流
            function initStream(options, callback) {
                localStream = new RTCat.Stream(options);
                localStream.on('access-accepted', function () {
                        session.send({stream: localStream, data: true});
                        callback(localStream);
                    }
                );
                localStream.on('access-failed', function (err) {
                    console.log(err);
                });

                localStream.on('play-error', function (err) {
                    console.log(err);
                });
                localStream.init();
            }

            // 显示流
            function displayStream(id, stream) {

                // Video container
                var videoContainer = document.createElement("div");
                videoContainer.setAttribute('style', "width: 300px; height:300px;");

                // Video player
                var videoPlayer = document.createElement('div');
                videoPlayer.setAttribute("id", "peer-" + id);

                videoContainer.appendChild(videoPlayer);
                mediaList.appendChild(videoContainer);

                stream.play("peer-" + id);
            }

            /**************************************
            *               建立会话
            ***************************************/

            // 使用token新建会话，请将此处的Token替换为
            // 从http://dashboard.shishimao.com/生成的Token
            session = new RTCat.Session("427ec255-d112-4de0-a58c-4f96765d42e0");

            session.connect();

            session.on('connected', function (users) {
                console.log('Session connected');
                initStream({video: true, audio: true, data: true}, function (stream) {
                    displayStream('self', stream)
                });
            });

            session.on('in', function (token) {
                if (localStream) {
                    session.sendTo({to: token, stream: localStream, data: true});
                }
                console.log('someone in');
            });

            session.on('out', function (token) {
                console.log('someone out');
            });

            session.on('remote', function (r_channel) {
                var id = r_channel.getId();
                r_channel.on('stream', function (stream) {
                    displayStream(id, stream);
                });
                r_channel.on('close', function () {
                    $('#peer-' + id).parent().remove();
                });
            });

        }).apply(this, [jQuery]);
    </script>
</body>
</html>